<template>
    <div class="box-card box-minheight">
        <div class="card-header">
            <span>{{ curRouteName }}</span>
        </div>
        <div class="box-content">
            <el-table :data="serialConfigList" border>
                <!-- 表头 -->
                <el-table-column label="串口名称" prop="portCode"></el-table-column>
                <!-- <el-table-column label="端口类型" prop="portType"></el-table-column> -->
                <el-table-column label="协议类型" prop="protocolType"></el-table-column>
                <!-- <el-table-column label="是否开启设备透传" prop="devicePassThrough">
                    <template #default="{ row }">
                        <el-tag v-if="row.devicePassThrough" type="success">是</el-tag>
                        <el-tag v-else type="danger">否</el-tag>
                    </template>
                </el-table-column> -->
                <el-table-column label="设备数量" prop="deviceCount"></el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <!-- <el-button type="primary" icon="Edit" size="small" @click="serialConfig(row)">串口配置</el-button> -->
                        <el-button type="success" size="small" @click="bindDevice(row)">绑定设备</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <SerialForm ref="serialForm" :serialVisible="serialVisible" @closeSerial="closeSerial"></SerialForm>
    <BindDeviceForm ref="bindDeviceForm" :bindDeviceVisible="bindDeviceVisible" @closeBindDevice="closeBindDevice">
    </BindDeviceForm>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, computed, reactive, nextTick } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import SerialForm from '@/views/gatherOrder/serialPortConfig/serialForm.vue'
import BindDeviceForm from '@/views/gatherOrder/serialPortConfig/bindDeviceForm.vue'

//获取路由对象
let $route = useRoute()
// 计算出当前路由名称
let curRouteName = computed(() => {
    return $route.matched[$route.matched.length - 1].meta.title
})
const searchFormRef = ref<FormInstance | null>(null)
const searchForm = reactive({
    className: '0',
    deviceName: '1',
})
const handleSearch = () => {
    console.log('submit!')
}
//重置按钮
const handleReset = () => {
}

interface SerialConfig {
    portCode: string;
    portType: string;
    protocolType: string;
    devicePassThrough: boolean;
    deviceCount: number;
}

const serialConfigList = ref<SerialConfig[]>([
    { portCode: 'COM1', portType: 'rs485', protocolType: 'modbus rtu', devicePassThrough: true, deviceCount: 5 },
    { portCode: 'COM2', portType: 'rs485', protocolType: 'modbus tcp', devicePassThrough: false, deviceCount: 3 },
    { portCode: 'COM3', portType: 'rs485', protocolType: 'modbus tcp', devicePassThrough: false, deviceCount: 3 },
    { portCode: 'COM4', portType: 'rs485', protocolType: 'modbus tcp', devicePassThrough: false, deviceCount: 3 },
    { portCode: 'COM5', portType: 'rs485', protocolType: 'modbus tcp', devicePassThrough: false, deviceCount: 3 },
    { portCode: 'COM6', portType: 'rs485', protocolType: 'modbus tcp', devicePassThrough: false, deviceCount: 3 },
]);
const serialForm = ref()
const serialVisible = ref(false)
const serialConfig = (row: any) => {
    console.log(row)
    serialVisible.value = true
}

const closeSerial = (v) => {
    serialVisible.value = v
}
const bindDeviceForm = ref()
const bindDeviceVisible = ref(false)
const bindDevice = (row: any) => {
    bindDeviceVisible.value = true
}
const closeBindDevice = (v) => {
    bindDeviceVisible.value = v
}

</script>

<style scoped lang="scss">
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}
</style>